<template>
  <div>
    <el-row v-if="listQuery && listQuery.length > 0" :gutter="5">
      <template v-for="(selfColumn, index) in selfColumns" v-if="selfColumn.queryable && conditionRelOptions[selfColumn.searchType]">
        <el-col
          :xs="{span: ((selfColumn.searchType === 'ENABLE' || selfColumn.searchType === 'BOOLEAN' || selfColumn.searchType === 'DICTIONARY') ? 1 : 2) * 12}"
          :sm="{span: (listQuery[index].condition === 'BT' ? 4 : ((selfColumn.searchType === 'ENABLE' || selfColumn.searchType === 'BOOLEAN' || selfColumn.searchType === 'DICTIONARY') ? 1 : 2)) * 6}"
          :md="{span: (listQuery[index].condition === 'BT' ? 4 : ((selfColumn.searchType === 'ENABLE' || selfColumn.searchType === 'BOOLEAN' || selfColumn.searchType === 'DICTIONARY') ? 1 : 2)) * 6}"
          :lg="{span: (listQuery[index].condition === 'BT' ? 4 : ((selfColumn.searchType === 'ENABLE' || selfColumn.searchType === 'BOOLEAN' || selfColumn.searchType === 'DICTIONARY') ? 1 : 2)) * 4}"
          :xl="{span: (listQuery[index].condition === 'BT' ? 4 : ((selfColumn.searchType === 'ENABLE' || selfColumn.searchType === 'BOOLEAN' || selfColumn.searchType === 'DICTIONARY') ? 1 : 2)) * 2}"
        >
          <!--            TREE_SELECT-->
          <el-cascader
            v-if="selfColumn.searchType && selfColumn.searchType.indexOf('TREE') !== -1"
            v-model="listQuery[index].v"
            :options="options[selfColumn.optionKey]"
            class="filter-item"
            :props="{value: 'id', label: 'name', leaf: 'name', emitPath: false, multiple: true, checkStrictly : true}"
            collapse-tags
            @change="fetchData(1)"
          />
          <!--     远程选择       -->
          <template v-else-if="selfColumn.searchType && selfColumn.searchType === 'REMOTE_SELECT_BOOK'">
            <remote-select-book
              :key="selfColumn.key"
              :ref="'_RemoteBookForm_' + selfColumn.key"
              :column-name="selfColumn.key"
              :index="index"
              :placeholder="selfColumn.label"
              :multiple="selfColumn.remote.multiple"
              class="filter-item"
              @columnValChange="columnValChange"
            />
          </template>
          <!--     远程选择       -->
          <template v-else-if="selfColumn.searchType && selfColumn.searchType === 'REMOTE_SELECT'">
            <remote-select
              :ref="'_RemoteForm_' + selfColumn.key"
              :column-name="selfColumn.key"
              :url="selfColumn.remote.url"
              :index="index"
              :label="selfColumn.remote.label"
              :placeholder="selfColumn.label"
              :multiple="selfColumn.remote.multiple"
              class="filter-item"
              @columnValChange="columnValChange"
            />
          </template>
          <!--            DICTIONARY-->
          <el-select
            v-else-if="selfColumn.searchType && selfColumn.searchType === 'DICTIONARY'"
            v-model="listQuery[index].v"
            clearable
            multiple
            class="filter-item"
            :placeholder="selfColumn.label"
            @change="fetchData(1)"
          >
            <el-option
              v-for="item in options[selfColumn.optionKey]"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <!--            ENABLE-->
          <el-select
            v-else-if="selfColumn.searchType && selfColumn.searchType === 'ENABLE'"
            v-model="listQuery[index].v[0]"
            clearable
            class="filter-item"
            :placeholder="selfColumn.label"
            @change="fetchData(1)"
          >
            <el-option v-for="item in statusOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <!--            BOOLEAN-->
          <el-select
            v-else-if="selfColumn.searchType && selfColumn.searchType === 'BOOLEAN'"
            v-model="listQuery[index].v[0]"
            clearable
            class="filter-item"
            :placeholder="selfColumn.label"
            @change="fetchData(1)"
          >
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
          <!--            DATE_TIME-->
          <el-date-picker
            v-else-if="selfColumn.searchType && selfColumn.searchType === 'DATE_TIME'"
            v-model="listQuery[index].v"
            clearable
            class="filter-item"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator=" - "
            :start-placeholder="selfColumn.label + '开始'"
            :end-placeholder="selfColumn.label + '结束'"
            @change="fetchData(1)"
          />
          <!--            OTHER-->
          <template v-else>
            <template v-if="listQuery[index].d === 'BT'">
              <el-input
                v-model="listQuery[index].v[0]"
                clearable
                class="filter-item"
                @change="conditionChange = true"
                @keyup.enter.native="fetchData(1)"
              >
                <template slot="prepend">
                  <el-tooltip effect="dark" :content="selfColumn.label" placement="top">
                    <el-select v-model="listQuery[index].d">
                      <el-option
                        v-for="(item, index_) in conditionRelOptions[selfColumn.searchType || 'WORD']"
                        :key="index_"
                        :label="selfColumn.label + conditionOptions[item]"
                        :value="item"
                      />
                    </el-select>
                  </el-tooltip>
                </template>
                <el-input slot="append" v-model="listQuery[index].v[1]" @change="conditionChange = true" clearable />
              </el-input>
            </template>
            <template v-else>
              <el-input
                v-model="listQuery[index].v[0]"
                clearable
                class="filter-item"
                :placeholder="selfColumn.label"
                @change="conditionChange = true"
                @keyup.enter.native="fetchData(1)"
              >
                <template slot="prepend">
                  <el-tooltip effect="dark" :content="selfColumn.label" placement="top">
                    <el-select v-model="listQuery[index].d">
                      <el-option
                        v-for="(item, index_) in conditionRelOptions[selfColumn.searchType || 'WORD']"
                        :key="index_"
                        :label="selfColumn.label + conditionOptions[item]"
                        :value="item"
                      />
                    </el-select>
                  </el-tooltip>
                </template>
              </el-input>
            </template>
          </template>
        </el-col>
      </template>
    </el-row>
    <el-button v-waves type="primary" class="filter-button" icon="el-icon-search" @click="fetchData()">搜索</el-button>
    <el-button v-waves type="primary" class="filter-button" icon="el-icon-plus" plain @click="handleAdd">新建</el-button>
    <slot name="button_actions"  :columns="columns" :options="options" :permission="permission" />
  </div>
</template>

<script>
import permission from '@/directive/permission' // 权限判断指令
import waves from '@/directive/waves'
import RemoteSelect from '@/components/RemoteSelect/index.vue'; // waves directive
import RemoteSelectBook from '@/components/RemoteSelectBook/index.vue'; // waves directive
export default {
  name: 'ListSearch',
  components: {RemoteSelect, RemoteSelectBook},
  directives: { permission, waves },
  props: {
    columns: { type: Array, default: () => [] },
    permission: { type: String, default: '' },
    options: {
      type: Object, default: () => {
      }
    },
  },
  data() {
    return {
      selfColumns: [],
      conditionChange: false,
      listQuery: [],
      conditionOptions: {
        EQ: '等于',
        NE: '不等',
        GE: '大/等',
        GT: '大于',
        LE: '小/等',
        LT: '小于',
        BT: '区间',
        LIKE: '包含',
        LL: '开头',
        LR: '结尾',
        IN: '属于',
        IS_NULL: '为空',
        NOT_NULL: '不为空',
      },
      conditionRelOptions: {
        DICTIONARY: ['IN'],
        TREE_SELECT: ['EQ', 'IN'],
        TREE_MULTI_SELECT: ['IN'],
        MULTI_SELECT: ['IN'],
        ENABLE: ['EQ'],
        BOOLEAN: ['EQ'],
        NUMBER: ['EQ', 'NE', 'BT', 'GE', 'GT', 'LE', 'LT'],
        SINGLE_NUMBER: ['EQ'],
        TAGS: ['IN'],
        WORD: ['LIKE', 'LL', 'LR', 'EQ', 'IS_NULL', 'NOT_NULL' ],
        TIME: ['BT'],
        DATE: ['BT'],
        DATE_TIME: ['BT'],
        REMOTE_SELECT: ['IN'],
        REMOTE_SELECT_BOOK: ['IN']
      },
    }
  },
  created() {
    const listQuery = []
    const selfColumns = []
    this.columns.forEach(e => {
      let condition = 'EQ'
      e.searchType = e.searchType || e.type || 'WORD'
      if (!e.searchType) {
        e.searchType = e.type
      }
      const conditions = this.conditionRelOptions[e.searchType]
      if (conditions) {
        condition = conditions[0]
      }
      listQuery.push({ c: e.key, d: condition, v: [] })
      selfColumns.push(e)
    })
    this.selfColumns = selfColumns
    const routerQuery = this.$route.query
    for (const key in routerQuery) {
      listQuery.push({ c: key, d: 'EQ', v: [routerQuery[key]] })
    }
    this.listQuery = listQuery
    this.fetchData()
  },
  methods: {
    handleAdd() {
      this.$emit('handleAdd')
    },
    columnValChange(val, index, column) {
      console.log(val, index, column)
      const v = []
      if (val instanceof Array) {
        val.forEach(e => {
          v.push(e.id)
        })
      } else {
        v.push(val.id)
      }

      this.listQuery[index] = { c: column, d: 'IN', v: v }
    },
    fetchData(page, size) {
      if (this.conditionChange) {
        page = 1
      }
      this.$emit('filterFetchData', page, size, this.listQuery)
      this.conditionChange = false
    }
  }
}
</script>

<style scoped>
  ::v-deep .filter-item .el-input-group__prepend {
    width: 33%;
  }
  ::v-deep .filter-item .el-input-group__append {
    width: 33%;
    padding: 0;
    margin: 0;
    border: none;
  }
</style>
